<template>
	<view>
		<l-echart ref="chart" @finished="init"></l-echart>
	</view>
</template>

<script>
	import * as echarts from 'echarts/core';
	import {
		LineChart,
		BarChart
	} from 'echarts/charts';
	import {
		TitleComponent,
		TooltipComponent,
		GridComponent,
		DatasetComponent,
		TransformComponent,
		LegendComponent
	} from 'echarts/components';
	// 标签自动布局，全局过渡动画等特性
	import {
		LabelLayout,
		UniversalTransition
	} from 'echarts/features';
	// 引入 Canvas 渲染器，注意引入 CanvasRenderer 是必须的一步
	import {
		CanvasRenderer
	} from 'echarts/renderers';

	// 按需引入 注册必须的组件
	echarts.use([
		LegendComponent,
		TitleComponent,
		TooltipComponent,
		GridComponent,
		DatasetComponent,
		TransformComponent,
		LineChart,
		BarChart,
		LabelLayout,
		UniversalTransition,
		CanvasRenderer
	]);
	export default {
		data() {
			return {
				option: {
					legend: {
						data: ['Rainfall', 'Evaporation']
					},
					xAxis: [{
						type: 'category',
						// prettier-ignore
						data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
							name: 'Rainfall',
							type: 'bar',
							data: [
								2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
							],
							markPoint: {
								data: [{
										type: 'max',
										name: 'Max'
									},
									{
										type: 'min',
										name: 'Min'
									}
								]
							},
							markLine: {
								data: [{
									type: 'average',
									name: 'Avg'
								}]
							}
						},
						{
							name: 'Evaporation',
							type: 'bar',
							data: [
								2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
							],
							markPoint: {
								data: [{
										name: 'Max',
										value: 182.2,
										xAxis: 7,
										yAxis: 183
									},
									{
										name: 'Min',
										value: 2.3,
										xAxis: 11,
										yAxis: 3
									}
								]
							},
							markLine: {
								data: [{
									type: 'average',
									name: 'Avg'
								}]
							}
						}
					]
				},
			};
		},
		mounted() {
			// init(echarts, theme?:string, opts?:{}, chart => {})
			// echarts 必填， 非nvue必填，nvue不用填
			// theme 可选，应用的主题，目前只支持名称，如：'dark'
			// opts = { // 可选
			//  locale?: string  // 从 `5.0.0` 开始支持
			// }
			// chart => {} ， callback 返回图表实例
			this.$refs.chart.init(echarts, chart => {
				chart.setOption(this.option);
			});
		},
		methods: {
			async init() {
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chart.init(echarts);
				chart.setOption(this.option)
			}
		}
	}
</script>

<style>

</style>